﻿<br /><nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondnav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="secondnav">

            <form class="navbar-form navbar-left" role="search">
                <div class="form-group input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" style="margin-top:5px" disabled><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                    <input type="text" name="search" class="form-control" ng-model="SearchField" placeholder="Search For An Item!" style="margin-top:5px" />
                </div>
            </form>
            <ul class="nav navbar-nav pull-left">
                <li class="dropdown">
                    <a href style="font-weight:400; font-size:16px;padding-top: 20px;padding-bottom: 15px;" class="dropdown-toggle" data-toggle="dropdown">Categories<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-click="selectgenre(1)"><a href>Smartwatches</a></li>
                        <li ng-click="selectgenre(2)"><a href>Smartphones</a></li>
                        <li ng-click="selectgenre(3)"><a href>Computers/Laptops</a></li>
                        <li ng-click="selectgenre(4)"><a href>Artificial Intelligence/Robots</a></li>
                        <li ng-click="selectgenre(5)"><a href>Futuristic Technology</a></li>
                        <li ng-click="selectgenre(6)"><a href>Flying Things</a></li>
                        <li><a href ng-click="genre=''">All Categories</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li data-ng-show="username"><a href>Wallet: {{userWallet | currency}}</a></li>
                <li data-ng-show="username"><a href>Bid Count: {{userBids}}</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="col-sm-3" ng-repeat="i in items | filter:genre | filter:SearchField">
    <table class="item width2 height2 indextable" style="width: 250px;">
        <tr>
            <td style=" padding-top:10px" align="center">
                <div class="popouthover" ng-click="ItemDetail(i.Id)">{{i.Name}}</div>
            </td>
        </tr>
        <tr>
            <td style="text-align:center">
                <img data-ng-src="{{i.imageUrl[0]}}" style="height: 175px; width: 175px;" ng-click="ItemDetail(i.Id)" />
            </td>
        </tr>

        <tr>
            <td style="text-align:center" id="countdown-timer">
                {{i.Cost | currency}}
                <br />
                <div ng-show="i.msRemaining - tickcount > 0">
                    {{i.msRemaining - tickcount | msToTs}}
                </div>
                <div ng-show="i.msRemaining - tickcount < 0 && !i.isFinished">
                    Uh-Ohes...
                </div>
                <div ng-show="i.isFinished">
                    Expired
                </div>
                <span ng-show="i.isFinished && i.UserName">Winner: </span><span>{{i.UserName}}</span>
                <span ng-show="i.isFinished && !i.UserName">No Bids Submitted</span>
                <br />
                <button style="text-align:center;width: 157px;padding-left: 5px;margin-left: 16.5;margin-left: 12px;height: 38px;padding-right: 5px;margin-right: 10px;" class="btn btn-success popouthoverbtn" ng-click="bidSubmit(i)" data-ng-disabled="!username || i.isFinished || userBids < 1"><span ng-show="i.isFinished" class="ng-hide">Sold</span><span ng-hide="i.isFinished" class="">Bid</span></button>
            </td>
        </tr>
        <br />
    </table>
</div>
